<!--代码逻辑和样式库-->
<script src="./area-statistics.component.js"></script>
<style src="./area-statistics.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 内容区域 -->
    <div class="content-container">
      <div id="area-map"></div>
    </div>
    <!-- 地图工具  -->
    <div class="custom-bar-tools">
      <div class="row m-0">
        <div class="col-12 p-0">
          <el-tooltip effect="dark" content="显示工具栏" placement="right">
            <img v-show="!showBarTools" @click="toggleBarTools()" class="cursor-hand " src="@/assets/map/icon-show.png">
          </el-tooltip>
          <el-tooltip effect="dark" content="隐藏工具栏" placement="right">
            <img v-show="showBarTools" @click="toggleBarTools()" class="cursor-hand " src="@/assets/map/icon-hide.png">
          </el-tooltip>
          <div v-if="showBarTools">
            <el-tooltip effect="dark" content="放大地图" placement="right">
              <img @click="setMapZoom(true)" class="cursor-hand " src="@/assets//map/icon-plus.png">
            </el-tooltip>
            <el-tooltip effect="dark" content="缩小地图" placement="right">
              <img @click="setMapZoom(false)" class="cursor-hand " src="@/assets//map/icon-minus.png">
            </el-tooltip>
            <el-tooltip effect="dark" content="测量距离" placement="right">
              <img @click="drawingLineTool.open()" class="cursor-hand " src="@/assets//map/icon-distance.png">
            </el-tooltip>
            <el-tooltip effect="dark" content="测量面积" placement="right">
              <img @click="drawingAreaTool.open()" class="cursor-hand " src="@/assets//map/icon-area.png">
            </el-tooltip>
            <el-tooltip effect="dark" content="清除所有绘画图形" placement="right">
              <img @click="deleteDrawingShapes()" class="cursor-hand " src="@/assets//map/icon-delete.png">
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="position-absolute filter-content">
      x
    </div>
  </div>
</template>
